import Card from '@/pages/iot/components/Card.tsx';
import { useCatch } from '@/hooks';
import { FC, useMemo, useRef, useState } from 'react';
import { RadioChangeEvent } from 'antd';
import { useQuery } from '@tanstack/react-query';
import IotServices from '@/api/services/iotServices.ts';
import * as echarts from 'echarts';
import { useTheme } from '@/store/settingsStore.ts';
import { style, ThemeMode } from '@ycx/ui';
import { useEcharts } from '@/hooks';

type Props = {
  carNo?: string;
};

type EChartOption = echarts.EChartOption;

type Format = echarts.EChartOption.Tooltip.Format;

const AlarmHandleCard: FC<Props> = ({ carNo }) => {
  const theme = useTheme();

  const isLight = useMemo(() => {
    return theme === ThemeMode.Light;
  }, [theme]);

  const catchFn = useCatch();
  const [type, setType] = useState('1');
  const onChange = (e: RadioChangeEvent) => {
    setType(e.target.value);
  };

  const { data } = useQuery({
    queryKey: ['alarmDeal', type, carNo],
    queryFn: () => catchFn(() => IotServices.getAlarmDeal({ order: type, carNo })),
    select: ({ data }) => data,
    staleTime: 0,
  });

  const chartRef = useRef<HTMLDivElement>(null);

  const option = useMemo<EChartOption>(() => {
    const d = [data?.ignoredCount ?? 0, data?.dealWithCount ?? 0, data?.unDealWithCount ?? 0];
    return {
      grid: {
        top: 30,
        bottom: 20,
        right: 1,
        left: 45,
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params): string {
          const label = (params as Format[])[0].axisValueLabel;
          const value = (params as Format[])[0].data;
          return `${label}: ${value}`;
        },
      },
      xAxis: {
        type: 'value',
        minInterval: 1, // 设置最小间隔为1
        axisLine: {
          show: true, // 显示轴线
          lineStyle: {
            color: isLight ? style.neutralColorDividerLight : style.neutralColorDividerDark,
          },
        },
        axisTick: {
          show: false, // 不显示刻度
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: isLight ? style.neutralColorDividerLight : style.neutralColorDividerDark,
          },
        },
      },
      yAxis: {
        type: 'category',
        data: ['AI误报', '已上报', '未处理'],
        axisLine: {
          show: true, // 显示轴线
          lineStyle: {
            color: isLight ? style.neutralColorDividerLight : style.neutralColorDividerDark,
          },
        },
        axisTick: {
          show: false, // 不显示刻度
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: '8px',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#4C68FF33' },
              { offset: 1, color: '#3FFEFF' },
            ]),
          },
          data: d,
        },
      ],
    };
  }, [isLight, data]);

  useEcharts(chartRef, option);

  return (
    <Card title="报警处理" gap={0} onTypeChange={onChange} type={type} style={{ width: '420px' }}>
      <div ref={chartRef} style={{ height: '152px' }} />
    </Card>
  );
};

export default AlarmHandleCard;
